<template lang="html">
  <div id="register" >
    <p>红包已存入<span> 155****7219 </span>的鲸鱼账户中 <br/>注册后可查看红包，收益可体现</p>

    <form class="form">
      <div class="form-item">
        <input type="tel" class="verifica" placeholder="验证码" maxlength="6" >
        <input type="button" class="verifica-btn"  value="获取验证码" @click="GetVerificationCode">
      </div>
      <div class="form-item">
        <input type="password" class="password" placeholder="请输入密码" maxlength="16" minlength="6">
      </div>
      <div class="form-item">
        <label @click="hideGou" :class="{isgou}">我以接受并阅读</label><a class="xieyi" href="javascript:;">《用户使用条款》</a>
      </div>
      <div class="form-item">
        <input type="button" class="submitBtn" value="完成" @click="earn">
      </div>
    </form>
    <jrWarm :showWarn="showWarn" :warnInfo="warnInfo"></jrWarm>
  </div>
</template>

<script>
  import $ from 'jquery'
  import jrWarm from '../../components/JrWarn.vue'
  import qs from 'qs';
  import wx from 'weixin-js-sdk'

  // 引入详情页
  export default {
    name: 'register',
    data () {
      return {
        isgou: true,
        play: null,
        showWarn: false,
        warnInfo: '',
        sendSmsUrl: 'http://hbjr.jinrgame.com/Common/sendSms',
        registerUrl: 'http://hbjr.jinrgame.com/Common/register',
        event_key: 'GAME_TYPE_XIAN_HUNAN_LAO_HU_JI'
      }
    },
    props:{
      telVal: {
        type: String,
        default: '14870430023',
      },
      isWin: {
        type: Boolean,
        default: false,
      },
    },
    created () {
//      wx.hideMenuItems({})
      wx.showOptionMenu();  //隐藏右上角菜单接口
//      wx.hideOptionMenu();  //显示右上角菜单接口
      /** 屏蔽分享 */
      function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');  //隐藏右上角菜单接口
      }

      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        onBridgeReady();
      }


      // 调用事件接收
      this.$root.eventHub.$on('showWarnFu', (val) => {
        this.$nextTick(() => {
          this.showWarn = val
        });
      });
    },
    mounted () {
      wx.hideOptionMenu();
    },
    methods:{
      // 初始化请求数据
      initHttp:  function(url, params){
        this.$http.post(url, qs.stringify(params)).then((response) => {  // Lambda写法
          response = response.data;
//          console.log(response)
          this.warnInfo = response.data
          this.showWarn = true

        });
      },
      hideGou() {
        this.isgou = !this.isgou
      },
      // 发送验证码
      GetVerificationCode() {
        var codeTime = 60;
        var params ={
          tel: this.telVal,
          event_key: this.event_key
        }
        this.initHttp(this.sendSmsUrl, params)
        $('.verifica-btn').val(codeTime+'s重新获取');
        $('.verifica-btn').attr('disabled','disabled');
        $('.verifica-btn').css('background','#8f95bf');
        this.play = setInterval(() => {
          codeTime--;
          if(codeTime==0){
            $('.verifica-btn').val('获取验证码');
            clearInterval(this.play);
            $('.verifica-btn').removeAttr('disabled');
            $('.verifica-btn').css('background','#ffcc21');
            return;
          }
          $('.verifica-btn').val(codeTime+'s重新获取');
        },1000);
      },
      // 立即验证
      earn:function (){
        var reg = /^[0-9]*$/
        var regPws = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
        var yanzVal = $('input.verifica').val()
        var passwordVal = $('input.password').val()
        if(yanzVal == '' || yanzVal == null){
          this.warnInfo = '验证码不能为空'
          this.showWarn = true
          return false;
        }else if(!reg.test(yanzVal)){
          this.warnInfo = '验证码只能为数字'
          this.showWarn = true
          return false;
        }else if(yanzVal.length!= 6){
          this.warnInfo = '验证码为6位数'
          this.showWarn = true
          return false;
        }else if(passwordVal == '' || passwordVal == null){
          this.warnInfo = '密码不能为空'
          this.showWarn = true
          return false;
        }else if(!regPws.test(passwordVal)){
          this.warnInfo = '密码格式错误'
          this.showWarn = true
          return false;
        }else if(!this.isgou){
          this.warnInfo = '请遵守协议'
          this.showWarn = true
          return false;
        }
        var params = {
          tel: this.telVal,
          checksms: yanzVal,
          password: passwordVal,
          event_key: this.event_key
        }
        this.initHttp(this.registerUrl, params)
      }
    },
    components: {
      jrWarm,
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/style/base.styl'

html, body
  height 100%


#register
  position relative
  z-index 1
  width 10rem
  height 100%
  margin  0 auto
  background #64acff url("../../assets/logo_r.png") center  rem(64) no-repeat
  background-size rem(192) rem(61)
  p
    padding-top rem(180)
    margin-bottom rem(114)
    text-align center
    line-height rem(44)
    font-size rem(28)
    color #fff
    span
      color #cc0e28
  .form
    .form-item
      overflow hidden
      padding rem(24) rem(30)
      input
        height rem(90)
        border-radius rem(10)
        text-indent rem(24)
        font-size rem(32)
        background-color #d9d9d9
      input::-webkit-input-placeholder
        font-size rem(28)
        color #999999
      .verifica
        float left
        width 52%
      .verifica-btn
        float right
        width 40%
        background-color #ffcc21
        color #fff
      .password
        width 100%
      label
        display inline-block
        padding-left rem(40)
        line-height rem(83)
        background url("../../assets/juxingkaung.png") no-repeat left rem(28)
        background-size rem(22) rem(22)
      .isgou
        background url("../../assets/dagou.png") no-repeat left rem(28), url("../../assets/juxingkaung.png") no-repeat left rem(28)
        background-size rem(20) rem(20), rem(22) rem(22)
      .xieyi
        display inline-block
        height rem(83)
        line-height rem(83)
      .submitBtn
        display block
        width rem(560)
        margin rem(100) auto 0
        background-color #ffcc21
        color #ffffff


  #app .oneScreen
    height 10rem


</style>
